/*
 * @Description:自定义选项弹框
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-06 12:55:23
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-08 15:00:54
 */
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Modal } from 'antd';
import PubSub from 'pubsub-js';

import DelCustomOptions from './delCustomOptions';

import './index.css'
// import '../../../../../../button.css'
const AddPosition = (props) => {
    const [FormRef] = Form.useForm()//解构Form
    // console.log('props', props);
    const [cateName, setCateName] = useState('')
    const [datatList, setDatatList] = useState([
        /* { id: 0, name: '老板' },
        { id: 1, name: '董事长' },
        { id: 2, name: '总经理' },
        { id: 3, name: '负责人' },
        { id: 4, name: '业务员' },
        { id: 5, name: '技术员' },
        { id: 6, name: '其他' }, */
    ])
    /***模态框处理函数 ***************************************************/
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
    };

    const handleCancel = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
    };
    /**************** ********************************************************/
    function delteModalShow() {
        showModal()
    }
    let time = null
    //获取输入数据并传给父组件
    function inputValue(e) {
        const { title } = props.send
        // console.log(title);
        if (time !== null) {
            clearTimeout(time)
        }
        time = setTimeout(() => {
            // console.log(e);
            const data = e.target.value
            props.send.headleSendData(e, data, title.modalcate, inputClearn)
            // props.data.addPositionSend(e, data)
        }, 500)
    }
    //清空输入
    function inputClearn() {
        FormRef.setFieldsValue({
            addPosition: ''
        })
    }
    //
    /*  PubSub.subscribe('addData', (_, data) => {
         console.log('新增工单类型addData', data);
         const { addPosition } = data.ref
         console.log('新增工单类型addData', addPosition);
         setDatatList(data.data)
         const { title } = props.send
         // const dataName = data[data.length - 1]
         // console.log(dataName);
         props.send.headleSendData('e', addPosition, title.modalcate, inputClearn)
     }) */
    useEffect(() => {
        //发布addData数据，用于接收子组件接受数据
        PubSub.subscribe('addData', (_, data) => {
            console.log('新增工单类型addData', data);
            const { addPosition } = data.ref
            // const { addPosition } = data.data
            // console.log('新增工单类型addData', addPosition);
            setDatatList(data.data)
            const { title } = props.send
            // const dataName = data[data.length - 1]
            // console.log(dataName);
            props.send.headleSendData('e', addPosition, title.modalcate, inputClearn)
        })
        // console.log(props);
        let { sendData, title } = props.send
        // console.log(sendData);
        setCateName(title.modalName)
        setDatatList(sendData)//将props传来数据设置为当前页职位数据 
        return () => {
            PubSub.unsubscribe('addData')
        }
    }, [props]);
    return (
        <div className='addposition-contanier'>
            <h3>自定义选项值</h3>
            <div className='addPosition-content'>
                <Form name="addConlient" labelCol={{ span: 6, offset: 2 }} wrapperCol={{ span: 24 }} form={FormRef}>
                    <Form.Item label="新增选项值" rules={[{ required: true, message: 'Please input your client!' }]} name="addPosition">
                        <Input name="addPosition" style={{ width: 200 }} onChange={inputValue} />
                    </Form.Item>
                    <Form.Item label="已有选项值" rules={[{ required: true, message: 'Please input your client!' }]}>
                        <ul>
                            {
                                datatList.map(item => {
                                    return (<li key={item.id}>{item.sendName}</li>)
                                })
                            }
                            <li><Button size='small' className='btn-bgc-6' onClick={delteModalShow}>删除自定义选项值</Button></li>
                            <Modal title="删除自定义选项值" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='delteSletectValue newAddOrder-box '
                                footer={[
                                    <Button key="self" onClick={handleCancel} className='btn-bgc-12'> 返回</Button>]}
                            >
                                <DelCustomOptions position={{ datatList, cateName, setDatatList }} />
                            </Modal>
                        </ul>
                    </Form.Item>
                </Form>
            </div>
        </div >
    );
}

export default AddPosition;
